<template>
	<div class="risk-content">
		<div class="exam-title">
			<div class="un-exam">{{ data.ExamName }}</div>
		</div>
		<div class="exam-content">
			<div v-for="(val, key) in list" :key="key">
				<div class="mb-10 questions-title">
					<span v-if="key == 0">一、</span>
					<span v-if="key == 1">二、</span>
					<span v-if="key == 2">三、</span>
					<span v-if="key == 3">四、</span>
					<span v-if="key == 4">五、</span>
					{{ val.QName }}共{{ val.children && val.children.length }}题（{{
						val.Score + '.0'
					}}分）
				</div>
				<div
					class="questions-list"
					v-for="(item, index) in val.children"
					:key="index"
				>
					<div class="exam-question-title">
						{{ item.SEQ + 1 }}、{{ item.QName }}（{{ item.Score + '.0分' }}）
					</div>
					<div class="exam-questions">
						<div v-if="item.QType == 1 || item.QType == 2">
							<div
								class="mb-10"
								v-for="(item1, index1) in item.Items"
								:key="index1"
							>
								{{ item1.ItemName }}.{{ item1.Item }}
							</div>
						</div>
						<eagle-divider />
						<div>
							<div class="mb-10 question-answer">
								<span class="user-answer">正确答案</span>
								<div>{{ item.Answer }}</div>
							</div>
							<div class="mb-10 question-answer">
								<span class="user-answer">考生答案</span>
								<div>{{ item.UserAnswer }}</div>
							</div>
							<div class="mb-10 question-answer">
								<span class="user-answer">难度</span>
								<div>{{ item.Difficulty }}</div>
							</div>
							<div class="mb-10 question-answer">
								<span class="user-answer">解析</span>
								<div>{{ item.Analysis || '无' }}</div>
							</div>
							<div class="mb-10 question-answer">
								<span class="user-answer">结果</span>
								<div v-if="item.AnswerResult == 1">
									<img
										src="@/assets/Images/AppIcon/activity_examresult_halfright.png"
									/>
								</div>
								<div v-if="item.AnswerResult == 2">
									<img
										src="@/assets/Images/AppIcon/activity_examresult_right.png"
									/>
								</div>
								<div v-if="item.AnswerResult == -1">
									<img
										src="@/assets/Images/AppIcon/activity_examresult_wrong.png"
									/>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template> 
   
<script>
import { mapGetters } from 'vuex'
export default {
	data() {
		return {
			id: this.$route.query.id,
			loading: false,
			data: {},

			list: [],
		}
	},
	computed: {
		...mapGetters(['username']),
	},
	created() {
		this.getDetail()
	},
	methods: {
		getDetail() {
			let _this = this;
			_this.loading = true
			_this.$axios
			.get("/ExExam/GetExamUserPaperResult",{params:{id: _this.id}})
			.then((res) => {
				_this.loading = false
				res.data.QuestionAnswers.forEach((item, index) => {
					item.SEQ = index
				})
				res.data.QuestionAnswers.push(
					{
						parentQType: 1,
						QName: '单选题',
						QType: 0,
						Score: 0,
					},
					{
						parentQType: 2,
						QName: '多选题',
						QType: 0,
						Score: 0,
					},
					{
						parentQType: 3,
						QName: '判断题',
						QType: 0,
						Score: 0,
					},
					{
						parentQType: 4,
						QName: '填空题',
						QType: 0,
						Score: 0,
					},
					{
						parentQType: 5,
						QName: '简答题',
						QType: 0,
						Score: 0,
					}
				)
				let newArr = this.toTree(res.data.QuestionAnswers)

				let formData = newArr.filter(item => {
					if (item.children) return item
				})
				

				// 计算总分
				formData.forEach((item, index) => {
					if (item.children) {
						item.children.forEach((item1) => {
							item.Score += item1.Score
						})
					} 
				})
				_this.list = formData
				_this.data = res.data
			})
		},

		toTree(data) {
			var result = []
			if (!Array.isArray(data)) {
				return result
			}
			data.forEach((item) => {
				delete item.children
			})
			let map = {}
			data.forEach((item) => {
				map[item.parentQType] = item
			})

			data.forEach((item) => {
				let parent = map[item.QType]
				if (parent) {
					;(parent.children || (parent.children = [])).push(item)
				} else {
					result.push(item)
				}
			})
			return result
		},
	},
}
</script>

<style lang="less" scoped>
.risk-content {
	background-color: #fff;
	min-height: 100vh;
}
.exam-title {
	height: 30px;
	background-color: #e8f1f8;
	line-height: 30px;
	padding: 0 10px;
	font-size: 14px;

	.un-exam {
		display: inline-block;
		height: 100%;
		border-bottom: 2px solid #333;
	}
}
.exam-content {
	// height: calc(100vh - 60px);
	font-size: 14px;
}

.questions-title {
	background-color: #e8f1f8;
	padding: 10px;
}
.questions-list {
	padding: 10px;
}
.exam-question-title {
	// border-bottom: 1px solid #eee;
	margin-bottom: 15px;
}
.exam-questions {
	padding: 0 10px;
	border-bottom: 1px solid #eee;
	> div {
		line-height: 1.3;
		font-size: 14px;
	}
}
.exam-questions:last-child {
	border-bottom: 1px solid #fff;
}
.question-answer {
	display: flex;
	font-size: 14px;
	.user-answer {
		width: 25%;
	}
	> div {
		width: 75%;
	}
	img {
		width: 10px;
		height: 10px;
	}
}
</style>